<template>
    <div>
        <!-- 内容 -->
        <div class="FoundationClass">
            <van-tabs @change="tabsChange" v-model:active="active" type="card" class="FoundationContentStyle"
                title-active-color="#fff">
                <van-tab name="jkgk" title="基坑概况"
                    title-style="font-size: 16px; font-weight: 600;height:35px;display:flex;justify-content: start;padding-left: 10px;">
                    <div class="FFContentStyle" style="overflow-y: auto;">
                        <div v-for="(ele, index) in JKList" :key="index" style="margin-top: 14px;">
                            <div class="titleClass">
                                <img style="margin: 9px 12px 10px 11px; width: 17px; height: 17px;"
                                    src="../../../assets/images/矩形装饰.png" />
                                {{ ele.jkname }}
                            </div>
                            <div class="tentClass">
                                <p class="Flex" style="height: 28px;">
                                    <img src="../../../assets/images/home/ListTitleicon.png" width="16" alt="" />
                                    <span>基坑名称：</span>
                                    <span>{{ ele.jkname != null ? ele.jkname : "--" }}</span>
                                </p>
                                <p class="Flex" style="height: 28px;">
                                    <img src="../../../assets/images/home/ListTitleicon.png" width="16" alt="" />
                                    <span>基坑等级：</span>
                                    <span>{{ ele.jkgrade != null ? ele.jkgrade : "--" }}</span>
                                </p>
                                <p class="Flex" style="height: 28px;">
                                    <img src="../../../assets/images/home/ListTitleicon.png" width="16" alt="" />
                                    <span>基坑状态：</span>
                                    <span>{{ ele.jkstatus != null ? ele.jkstatus : "--" }}</span>
                                </p>
                                <p class="Flex" style="height: 28px;">
                                    <img src="../../../assets/images/home/ListTitleicon.png" width="16" alt="" />
                                    <span>进度状态：</span>
                                    <span>{{
                                        ele.progressstatus != null ? ele.progressstatus + `%` : "--"
                                    }}</span>
                                </p>
                            </div>
                        </div>
                        <p style="text-align: center;margin:20px 40px;font-size: 14px;">没有更多了</p>
                    </div>
                </van-tab>
                <van-tab name="jczp" title="监测照片"
                    title-style="font-size: 16px; font-weight: 600;height:35px;display:flex;justify-content: start;padding-left: 10px;">
                    <div class="FFContentStyle">
                        <div class="titlePhotoClass" @click="() => {
                            JKListshow = !JKListshow;
                        }
                            ">
                            <div>{{ JKNameZP }}</div>
                            <img style="margin: 9px 12px 10px 11px; width: 14px; height: 6px;"
                                src="../../../assets/images/Vector 830.png" />
                        </div>
                        <div class="PhontoClass">
                            <van-list v-model:loading="loading" :finished="finished" finished-text="没有更多了"
                                @load="GetRecognitionList">
                                <div style="position: relative; margin-bottom: 12px;" v-for="(el, index) in PhotosList"
                                    :key="index">
                                    <div style="
                    position: absolute;
                    width: 100%;
                    height: 28px;
                    line-height: 28px;
                    font-size: 12px;
                    background: rgba(0, 98, 178, 0.5);
                    text-align: center;
                  ">
                                        {{ el.imgname }}
                                    </div>
                                    <img style="height: 180px; width: 100%;" :src="baseUrl + el.imgURL" />
                                </div>
                            </van-list>
                        </div>
                    </div>
                </van-tab>
                <van-tab name="jcbb" title="监测报表"
                    title-style="font-size: 16px; font-weight: 600;height:35px;display:flex;justify-content: start;padding-left: 10px;">
                    <div class="FFContentStyle">
                        <div class="titlePhotoClass" @click="() => {
                            JKListshow = !JKListshow;
                        }
                            ">
                            <div>{{ JKNameBB }}</div>
                            <img style="margin: 9px 12px 10px 11px; width: 14px; height: 6px;"
                                src="../../../assets/images/Vector 830.png" />
                        </div>
                        <div>
                            <van-tabs v-model:active="Phontoactive" type="card" class="PhontoExtensionStyle"
                                title-active-color="#fff" @click-tab="onClickTab">
                                <van-tab v-for="item in tabList" :key="item.id" :title="item.title"
                                    title-style="font-size: 16px; font-weight: 600;">
                                    <template #title style="height: 100%;">
                                        <div style="display: flex;align-items: center;">
                                            <img :src="Phontoactive == item.id ? item.activeIcon : item.icon
                                                " style="width: 14px; height: 14px;" alt="" srcset="" />
                                            <div style="font-size: 12px; margin-left: 5px;">
                                                {{ item.title }}
                                            </div>
                                        </div>
                                    </template>
                                    <div class="reportClass">
                                        <van-list v-model:loading="loading2" :finished="finished2" finished-text="没有更多了"
                                            @load="GetData">
                                            <div class="Flex DivClass" v-for="item in ProjectjkList_data" :key="item.id"
                                                @click="LookItemPic(item)">
                                                <div class="specialText">{{ item.reportName }}</div>
                                                <div style="width: 5%;">
                                                    <svg width="8" height="11" viewBox="0 0 8 11" fill="none"
                                                        xmlns="http://www.w3.org/2000/svg">
                                                        <path
                                                            d="M6.46618 5.39507L6.46618 5.39507C6.52787 5.45256 6.52789 5.55037 6.46616 5.60789L6.46596 5.60808L6.46442 5.60948L6.46439 5.60944L6.45898 5.61448L1.73238 10.0191C1.73237 10.0191 1.73237 10.0191 1.73236 10.0191C1.6764 10.0713 1.58986 10.0712 1.53412 10.0192L1.53409 10.0192C1.47235 9.96164 1.47238 9.86383 1.53406 9.80635L5.76115 5.86724L6.15368 5.50145L5.76115 5.13565L1.53417 1.19666C1.53417 1.19666 1.53416 1.19665 1.53416 1.19665C1.47255 1.13923 1.47245 1.04149 1.53425 0.983894L1.53435 0.9838C1.59002 0.931885 1.67661 0.93175 1.73256 0.983889L1.73256 0.98389L6.46618 5.39507Z"
                                                            fill="white" stroke="white" />
                                                    </svg>
                                                </div>
                                            </div>
                                        </van-list>
                                    </div>
                                </van-tab>
                            </van-tabs>
                        </div>
                    </div>
                </van-tab>
            </van-tabs>
            <!-- 预览 -->
            <LookIframe ref="iframebaseRef" classType="ModelEarlyWarning" title="预览"></LookIframe>
            <van-popup v-model:show="JKListshow" position="bottom" :style="{ height: '50%' }">
                <van-picker show-toolbar title="切换基坑" :model-value="active == 'jczp' ? checkJKZP : checkJKBB" :columns="JKcheckOption.map((item) => {
                    return { text: item.jkname, value: item.id };
                })
                    " @cancel="() => {
                        JKListshow = false;
                    }
                        " @confirm="updateJK" />
            </van-popup>
        </div>
    </div>
</template>

<script name="Home">
import { defineComponent, ref, reactive, onMounted, nextTick } from "vue";
import { GetProjectjkList, GetMonitorPhotosList, GetJKReportList } from "@/api";
import { useAppStore } from "../../../store";
import { CreatedFormData } from "@/utils/CreatedFormData";
import LookIframe from "@/components/LookIframe/index.vue";
export default defineComponent({
    components: {
        LookIframe,
    },
    setup() {
        const { userInfo, projectInfo, projectList, baseUrl } = useAppStore();
        const active = ref("jkgk");
        const tabList = ref([
            {
                id: 0,
                type: 1,
                title: "日报",
                icon: new URL("@/assets/images/data/Group 5-1.png", import.meta.url)
                    .href,
                activeIcon: new URL("@/assets/images/data/Group 5.png", import.meta.url)
                    .href,
            },
            {
                id: 1,
                type: 2,
                title: "周报",
                icon: new URL("@/assets/images/data/Group 5-1.png", import.meta.url)
                    .href,
                activeIcon: new URL("@/assets/images/data/Group 5.png", import.meta.url)
                    .href,
            },
            {
                id: 2,
                type: 3,
                title: "月报",
                icon: new URL("@/assets/images/data/Group 5-1.png", import.meta.url)
                    .href,
                activeIcon: new URL("@/assets/images/data/Group 5.png", import.meta.url)
                    .href,
            },
        ]);
        const JKList = ref([]);
        const Phontoactive = ref("0");
        const JKListshow = ref(false);
        const checkJKZP = ref([]);
        const checkJKBB = ref([]);
        const JKNameZP = ref("--");
        const JKNameBB = ref("--");

        const JKcheckOption = ref([]);
        const DayType = ref(1);

        const tabsChange = async (e) => {
            active.value = e;
            await doRefresh();
            if (e == "jkgk") {
                doRefresh();
            } else if (e == "jczp") {
                // 照片-基坑存在且在列表中找得到
                if (
                    localStorage.getItem("checkJKz") != null &&
                    JKcheckOption.value.some(
                        (item) => item.id == JSON.parse(localStorage.getItem("checkJKz"))[0]
                    )
                ) {
                    var data = JKcheckOption.value.filter(
                        (item) => item.id == JSON.parse(localStorage.getItem("checkJKz"))[0]
                    )[0];
                    checkJKZP.value = [data.id];
                    JKNameZP.value = data.jkname;
                } else {
                    JKcheckOption.value.length ? (checkJKZP.value = [JKcheckOption.value[0].id]) : [];
                    JKcheckOption.value.length ? (JKNameZP.value = JKcheckOption.value[0].jkname) : "---";
                }
                GetRecognitionList();
            } else {
                // 报表-基坑存在且在列表中找得到
                if (
                    localStorage.getItem("checkJKb") != null &&
                    JKcheckOption.value.some(
                        (item) => item.id == JSON.parse(localStorage.getItem("checkJKb"))[0]
                    )
                ) {
                    var data = JKcheckOption.value.filter(
                        (item) => item.id == JSON.parse(localStorage.getItem("checkJKb"))[0]
                    )[0];
                    checkJKBB.value = [data.id];

                    JKNameBB.value = data.jkname;
                } else {
                    JKcheckOption.value.length ? (checkJKBB.value = [JKcheckOption.value[0].id]) : [];
                    JKcheckOption.value.length ? (JKNameBB.value = JKcheckOption.value[0].jkname) : "---";
                }
                GetData();
            }
        };
        // 获取基坑
        const doRefresh = async () => {
            let fd = CreatedFormData({
                xid: projectInfo.id,
                searchword: "",
                pageIndex: 1,
                pageSize: 99999,
            });
            const res = await GetProjectjkList(fd);
            res.data.length ? (JKList.value = res.data) : [];
            res.data.length ? (JKcheckOption.value = res.data) : [];
        };
        // 获取监测照片
        const PhotosList = ref([]);
        const loading = ref(false);
        const finished = ref(false);
        const pageIndex = ref(1);
        const GetRecognitionList = async () => {
            if (checkJKZP.value.length < 1) {
                finished.value = true;
                return false
            }
            let fd = CreatedFormData({
                projectjkid: checkJKZP.value[0],
                searchword: "",
                pageIndex: pageIndex.value,
                pageSize: 10,
            });
            const res = await GetMonitorPhotosList(fd);
            if (res.data) {
                PhotosList.value = PhotosList.value.concat(res.data);
                pageIndex.value++;
                loading.value = false;
                if (PhotosList.value.length >= res.count) {
                    finished.value = true;
                }
            }
        };
        // 获取监测日报/周报/月报
        const ProjectjkList_data = ref([]);
        const loading2 = ref(false);
        const finished2 = ref(false);
        const pageIndex2 = ref(1);
        const GetData = async () => {
            if (checkJKBB.value.length < 1) {
                finished2.value = true;
                return false
            }
            let fd = CreatedFormData({
                projectId: projectInfo.id,
                type: DayType.value,
                moduleType: 1,
                searchword: "",
                linkId: checkJKBB.value[0],
                pageIndex: pageIndex2.value,
                pageSize: 10,
                isUpload: true,
            });
            const res = await GetJKReportList(fd);
            if (res.data) {
                ProjectjkList_data.value = ProjectjkList_data.value.concat(res.data);
                pageIndex2.value++;
                loading2.value = false;
                if (ProjectjkList_data.value.length >= res.count) {
                    finished2.value = true;
                }
            }
        };
        // 报表
        const onClickTab = ({ name, title }) => {
            ProjectjkList_data.value = [];
            loading2.value = false;
            finished2.value = false;
            pageIndex2.value = 1;
            DayType.value = tabList.value.filter((item) => item.id == name)[0].type;
        };
        // 切换照片和报表
        const updateJK = ({ selectedValues, selectedOptions }) => {
            JKListshow.value = false;
            var data = JKcheckOption.value.filter(
                (item) => item.id == selectedValues[0]
            )[0];
            if (active.value == "jczp") {
                localStorage.setItem("checkJKz", JSON.stringify(selectedValues));
                checkJKZP.value = selectedValues;
                JKNameZP.value = data.jkname;

                PhotosList.value = [];
                loading.value = false;
                finished.value = false;
                pageIndex.value = 1;
            } else {
                checkJKBB.value = selectedValues;
                JKNameBB.value = data.jkname;
                localStorage.setItem("checkJKb", JSON.stringify(selectedValues));

                ProjectjkList_data.value = [];
                loading2.value = false;
                finished2.value = false;
                pageIndex2.value = 1;
            }
        };

        // 预览
        const iframebaseRef = ref(null);
        const LookItemPic = (filePaths) => {
            nextTick(() => {
                iframebaseRef.value.LookItemPics(filePaths.fileUrl, '');
            })
        };
        onMounted(() => {
            doRefresh();
        });

        return {
            active,
            tabList,
            JKList,
            Phontoactive,
            JKListshow,
            checkJKBB,
            checkJKZP,
            JKNameZP,
            JKNameBB,
            JKcheckOption,
            PhotosList,
            loading,
            finished,
            GetRecognitionList,
            baseUrl,
            ProjectjkList_data,
            loading2,
            finished2,
            GetData,
            iframebaseRef,
            onClickTab,
            tabsChange,
            updateJK,
            LookItemPic,
        };
    },
});
</script>

<style lang="less" scoped>
.FoundationClass {
    color: #fff;
    width: 100%;
    height: 100%;

    .FoundationContentStyle {
        width: 100%;
        height: 100%;
        --van-tabs-card-height: 70px;

        :deep(.van-tab__text--ellipsis) {
            font-size: 32px;
        }

        :deep(.van-tabs__content) {
            height: 94%;
            width: 100%;
        }

        :deep(.van-tab__panel) {
            height: 98%;
        }

        :deep(.van-tabs__nav) {
            background: none;
        }

        :deep(.van-tabs__nav--card) {
            margin: 0;
            border: none;
        }

        :deep(.van-tab--card) {
            background: url(../../../assets/images/home/大事记.png) no-repeat;
            background-size: 100% 100%;
            color: #8991a2;
            border-right: none;
            margin-right: 2%;
        }

        :deep(.van-tab--card.van-tab--active) {
            background: url(../../../assets/images/home/项目概况.png) no-repeat;
            background-size: 100% 100%;
        }
    }
}

.FFContentStyle {
    height: 100%;
    width: 100%;
    // overflow: auto;
    // scrollbar-width: none // 隐藏滚动条样式;
}

.titleClass {
    height: 72px;
    width: 100%;
    font-size: 32px;
    display: flex;
    align-items: center;
    background: url("../../../assets/images/Group9436.png") no-repeat;
    background-size: 100% 100%;
}

.Flex {
    display: flex;
    align-items: center;
}

// 基坑概况
.tentClass {
    display: flex;
    justify-content: start;
    padding: 28px 3%;
    background-color: rgba(33, 46, 90, 0.5);
    overflow: auto;
    justify-content: space-around;
    flex-direction: column;
}

.tentClass p {
    width: 100%;
    font-size: 28px;
    border-bottom: 1px solid #728b9a6b;
}

.tentClass p:last-child {
    border-bottom: none;
}

// 照片
.titlePhotoClass {
    height: 72px;
    width: 100%;
    font-size: 32px;
    padding-left: 20px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    background: url("../../../assets/images/Group 1000004723.png") no-repeat;
    background-size: 100% 100%;
    margin: 26px 0px 28px 0px;
}

.PhontoClass {
    height: 88%;
    width: 100%;
    overflow: auto;
    scrollbar-width: none // 隐藏滚动条样式;
}

// 报表
.PhontoExtensionStyle {
    width: 100%;
    height: 100%;

    :deep(.van-tabs__wrap) {
        background-color: rgba(33, 46, 90, 0) !important;
        margin: 4px 0;
    }

    :deep(.van-tabs__content) {
        height: 93% !important;
    }

    :deep(.van-tab--card) {
        background: none !important;
        border-right: none;
        margin-right: 2%;
    }

    :deep(.van-tab--card.van-tab--active) {
        background: none !important;
    }
}

.reportClass {
    height: 55vh;
    // height: 50%;
    width: 100%;
    overflow-y: auto;
    scrollbar-width: none; // 隐藏滚动条样式
    background: linear-gradient(180deg, rgba(1, 5, 21, 0.40) 0%, rgba(1, 5, 21, 0.60) 97.76%);
    padding: 6px 26px;
    margin-bottom: 80px;
}

.reportClass .DivClass {
    width: 100%;
    font-size: 24px;
    border-bottom: 1px solid #728b9a;
    height: 92px;
    justify-content: space-between;
    padding-left: 18px;
    // padding: 6px 26px;
    // background: linear-gradient(180deg, rgba(1, 5, 21, 0.40) 0%, rgba(1, 5, 21, 0.60) 97.76%);
}

.reportClass .DivClass:last-child {
    border-bottom: none;
}

.specialText {
    text-indent: 0em;
    padding-left: 0em;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 1;
    overflow: hidden;
    text-overflow: ellipsis;
}
</style>
